<template>
  <div>
    <swiper :options="swiperOptions" ref="mySwiper" class="swiperL">
      <swiper-slide v-for="(item1,index) in items" :key="index">
        <smallSwiperComponent v-for="item in item1" :key="item.id" :imgurl="item.image_url" :title="item.title">
        </smallSwiperComponent>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination" v-if="page"></div>
    </swiper>
  </div>
</template>
<script>
  import smallSwiperComponent from "@/components/smallSwiperComponent.vue"
  export default {
    name: "SwipetComponent",
    components: {
      smallSwiperComponent,
    },

    data: function () {
      let defaultOptions = {
        loop: false, // 前后衔接循环
        pagination: { // 绑定分页器，否则分页器不显示
          el: '.swiper-pagination',
          type: 'bullets'
        },
      };

      return {
        swiperOptions: { ...defaultOptions, ...this.options },
        selectIndex: 0,
        item: [],
      }
    },

    props: {
      items: {
        type: Array,
      },
      page: {
        type: Boolean,
        default: true
      },
    },
    // methods: {
    //   clickAction1(){
    //     this.$router.push({name:"Shops"})
    //     alert(123)
    //   }
    // },
  }
</script>

<style lang="less" scoped>
  .swiperL {
    margin-top: 44px;
  }
</style>